<template>
  <div class="homes-main"
       id="top">
    <div class="box">
      <!-- //tab -->
      <div class="main-tab">
        <div :class="{'each-tab': true, 'is-active': activeValue === 1}"
             @click="activeValueChange(1)">
          <span>找用品</span>
          <div class="bottom-line"></div>
        </div>
        <div :class="{'each-tab': true, 'is-active': activeValue === 2}"
             @click="activeValueChange(2)">
          <span>找配件</span>
          <div class="bottom-line"></div>
        </div>
        <div :class="{'each-tab': true, 'is-active': activeValue === 3}"
             @click="activeValueChange(3)">
          <span>找服务</span>
          <div class="bottom-line"></div>
        </div>
      </div>
      <!-- 搜索 -->
      <div class="searchBox">
        <div class="searchs">
          <a-input-search placeholder="车型，商品名称，品牌，零件号，供应商"
                          enter-button="搜索采购"
                          size="large"
                          @search="onSearch" />
          <p style="padding-top:8px"> <a>欧版金美孚</a> <a>奔驰大桶油</a> <a>常用搜索词条</a></p>
          <div class="search_button"
               @click="onSearch">
            <span>货品找不到？价格不满意?</span>
            <span><img src="../../../assets/image/home/foot.png"
                   alt=""> 立即寻源</span>
          </div>
        </div>
      </div>
    </div>
    <!--各子路由界面-->
    <keep-alive>
      <router-view />
    </keep-alive>
    <!-- //下一步操作 -->
    <div class="floating">
      <div> <span><img src="../../../assets/image/home/attention.png"
               alt=""
               width="16"
               height="16"> <i></i> </span> 关注</div>
      <div> <span><img src="../../../assets/image/home/message.png"
               alt=""
               width="16"
               height="16"> <i></i> </span> 消息</div>
      <div> <span><img src="../../../assets/image/home/shopping.png"
               alt=""
               width="16"
               height="16"> <i></i> </span> 购物车</div>
      <div> <span><img src="../../../assets/image/home/lanzi.png"
               alt=""
               width="16"
               height="16"> <i></i> </span> 询价</div>
      <div> <span><img src="../../../assets/image/home/dingdan.png"
               alt=""
               width="16"
               height="16"> <i></i> </span> 发货单</div>
      <div> <span>
          <img src="../../../assets/image/home/kefu.png"
               alt=""
               width="16"
               height="16"> <i></i>
        </span> 客服</div>
      <div> <a href="#top">
          <span><img src="../../../assets/image/home/top.png"
                 alt=""
                 width="16"
                 height="16"> <i></i> </span> TOP
        </a></div>
    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      activeValue: 1,
      // steps: [
      //   {
      //     title: '创建账号',
      //     type: 0,
      //   },
      //   {
      //     title: '企业认证',
      //     type: 1,
      //   },
      //   {
      //     title: '平台审核',
      //     type: 2,
      //   },
      //   {
      //     title: '注册成功',
      //     type: 3,
      //   },
      // ],
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)

  },
  methods: {
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    handleScroll () {
      console.log(123123222);
    },
    // 类型切换事件
    activeValueChange (val) {
      this.activeValue = val;
    },
    //跳转搜索采购
    onSearch () {
      this.$router.push('/homes/searchView/search4S'); //跳转搜索
    },
  }
}
</script>

<style lang="less" scoped>
a {
  color: @placeHolderColor;
}
.floating {
  width: 78px;
  height: 342px;
  border: 1px solid @greyBorder;
  position: fixed;
  right: 20px;
  bottom: 140px;
  > div {
    width: 100%;
    height: 48px;
    border-bottom: 1px solid @greyBorder;
    font-size: 12px;
    line-height: 48px;
    text-align: center;
    background: #fff;
    cursor: pointer;
    a {
      display: inline-block;
      width: 76px;
      height: 48px;
      color: @colorCommonFont;
      font-size: 12px;
    }
    span {
      display: inline-block;
      width: 16px;
      margin-right: 4px;
      img {
        width: 16px;
        height: 16px;
      }
    }
  }
  > div:nth-child(7) {
    border-bottom: none;
  }
}
.homes-main .box {
  width: @mainViewAreaWidth;
  margin: 24px auto 33px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  .main-tab {
    .flex(flex-end, center);
    font-size: 28px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: @colorCommonFont;
    line-height: 20px;
    padding-top: 48px;
    margin-bottom: 48px;

    /deep/ .ant-divider {
      height: 25px;
      background: @greyBorder;
      margin: 0 41px;
      position: relative;
      top: 3px;
    }

    .each-tab {
      position: relative;
      .userUnSelect();
      cursor: pointer;
    }
    .each-tab:nth-child(2) {
      margin: 0 84px;
    }

    .bottom-line {
      width: 38px;
      height: 4px;
      opacity: 1;
      background: @activeRed;
      border-radius: 2px;
      position: absolute;
      bottom: -12px;
      left: 0;
      right: 0;
      margin: auto;
      display: none;
    }

    .is-active {
      font-size: 28px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: @activeRed;
      line-height: 24px;

      .bottom-line {
        display: block;
      }
    }
  }
  .searchBox {
    width: 700px;
    margin: 0 auto;
    /deep/ .ant-btn-lg {
      padding: 0 21px;
      font-size: 14px;
    }
    /deep/ .ant-btn-primary {
      background: @activeRed;
      border: 1px solid @activeRed;
    }

    /deep/ .ant-input {
      border: 2px solid @activeRed;
      border-right: none;
      &:hover {
        border-color: @activeRed;
        border: 2px solid @activeRed;
        border-right: none;
      }
      &:focus {
        box-shadow: 0 0 0 0 rgb(255, 255, 255);
        border-right: none;
      }
    }
    /deep/ .ant-input-lg {
      font-size: 14px;
    }
    .searchs {
      > p a {
        font-size: 12px;
        margin-right: 24px;
      }
      > p a:nth-child(1) {
        color: @activeRed;
      }
    }
    .search_button {
      width: 300px;
      height: 48px;
      margin: 40px auto 48px;
      background: #3b82ff;
      color: #fff;
      border-radius: 48px;
      text-align: center;
      cursor: pointer;
      span {
        line-height: 48px;
        color: #eeeeee;
      }
      span:nth-child(1) {
        margin-right: 5px;
      }
      span:nth-child(2) {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        img {
          vertical-align: sub;
        }
      }
    }
  }
}
</style>
